<template>
  <div class="page-chargeCode">
    <div class="charge-box">
      <input type="text" v-model="code" placeholder="请输入插头上唯一编码"/>
    </div>
    <div v-if="!code" class="btn btn-default">立即充电</div>
    <div v-else @click="StartCharge" class="btn btn-primary">立即充电</div>

    <div class="charge-txt">
      <p>计费说明：1元/4小时　　2元/8小时　　3元/充满</p>
      温馨提示：若输错充电编码，将无法正常充电
    </div>
  </div>

</template>

<style scoped>
  .page-chargeCode {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 80px 70px;
  }

  .charge-box {
    margin-bottom: 60px;
    width: 600px;
    height: 90px;
    line-height: 90px;
    border-radius: 45px;
    border: 2px solid #00ac64;
    box-sizing: border-box;
    padding: 0 20px;
  }

  .charge-box input {
    width: 100%;
    height: 86px;
    box-sizing: border-box;
    border-radius: 45px;
    font-size: 28px;
  }
  .btn-default{
    width: 600px;
    margin: 0 auto 60px;
    background: #dadada;
    height: 90px;
    line-height: 90px;
    border-radius: 45px;
    font-size: 28px;
  }
  .btn-primary{
    width: 600px;
    margin: 0 auto 60px;
    height: 90px;
    line-height: 90px;
    border-radius: 45px;
    font-size: 28px;
  }
  .charge-txt{
    font-size: 24px;
    padding: 0 10px;
    color: #3f3f3f;
  }
  .charge-txt p{
    height: 50px;
    line-height: 50px;
  }
</style>


<script>
  export default {
    name: 'HelloWorld',
    data () {
      return {
        code: ""
      }
    },
    mounted(){

    },
    methods: {
      StartCharge(){
        console.log("請求服務端，要求開鎖，開始做事情");

        this.$router.push('chargeStart');
      }
    }
  }
</script>
